<!-- 苗木搜索首页 -->
<template>
  <div class="search-container">
    <div class="header-search">
      <div @click="onClickLeft" class="icon"><van-icon class="back" name="arrow-left" /></div>
      <van-dropdown-menu
        ><van-dropdown-item v-model="searchType" :options="searchOptions"
      /></van-dropdown-menu>
      <van-search
        v-model="keyword"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch(keyword)">搜索</div>
        </template>
      </van-search>
    </div>

    <div class="search-wrap">
      <div class="search-item">
        <div class="title">
          <span>搜索历史</span>
          <van-icon @click="handleDelete" name="delete-o" />
        </div>
        <div class="list-wrap">
          <div
            @click="onSearch(item)"
            class="item"
            v-for="(item, index) in historyData"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="search-item">
        <div class="title">
          <span>热门搜索</span>
          <van-icon @click="handleHide" name="eye-o" />
        </div>
        <div class="list-wrap" v-if="showHot">
          <div @click="onSearch(item)" class="item" v-for="(item, index) in hotData" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import bridge from '@/utils/bridge.js'
import { searchHot, searchHistory, delHistory } from '@/api'

const router = useRouter()
// 搜索类型
const searchType = ref(1)
// 搜索类型
const searchOptions = ref([
  { text: '发布', value: 1 },
  { text: '求购', value: 2 }
])
// 搜索历史
const historyData = ref([])
// 热门搜索
const hotData = ref([])
// 搜索条件
const keyword = ref('')
const showHot = ref(true)
onMounted(async () => {
  bridge.setNavigationBarVisible({
    value: '0'
  })
  getHistoryData()
  getHotData()
})

// 获取历史查询记录
const getHistoryData = async () => {
  let { code, data } = await searchHistory()
  if (code === 200) {
    historyData.value = data
  }
}

// 获取热门搜索
const getHotData = async () => {
  let { code, data } = await searchHot()
  if (code === 200) {
    hotData.value = data
  }
}

const onSearch = async (item: string) => {
  if (item) {
    keyword.value = item
  }
  if (searchType.value === 1) {
    router.push({
      path: '/askToBuyList',
      query: { keyword: keyword.value }
    })
  } else {
    router.push({
      path: '/publishList',
      query: { keyword: keyword.value }
    })
  }
}

const handleDelete = async () => {
  if (historyData.value.length > 0) {
    let { code } = await delHistory()
    if (code === 200) {
      showToast('删除成功')
    }
  }
}

const handleHide = async () => {
  showHot.value = !showHot.value
}

const onClickLeft = () => {
  bridge.navigateBackTo({
    value: 'home'
  })
}
</script>

<style lang="scss" scoped>
.search-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  padding: 0 15px;
  padding-top: constant(safe-area-inset-top); /* 标准 */
  padding-top: env(safe-area-inset-top); /* iOS 11.0+ */
  .header-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
      width: 20px;
      height: 30px;
      text-align: left;
      line-height: 30px;
      .van-icon {
        font-size: 17px;
      }
    }

    :deep(.van-dropdown-menu) {
      .van-dropdown-menu__bar {
        background: #fff;
        box-shadow: none;

        .van-dropdown-menu__title {
          font-size: 13px;
        }
      }

      .van-dropdown-item {
        .van-cell {
          font-size: 13px;
        }
      }
    }

    :deep(.van-search) {
      flex: 1;

      .van-cell {
        font-size: 13px;
      }

      .van-search__action {
        padding: 0 0 0 10px;
        font-size: 13px;
      }
    }
  }

  .search-wrap {
    .search-item {
      margin-bottom: 24px;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
          font-size: 16px;
          color: #222;
          font-weight: 400;
        }

        .van-icon {
          color: #999;
          font-size: 18px;
        }
      }

      .list-wrap {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;

        .item {
          margin: 12px 0;
          padding: 0 12px;
          background: #f5f5f5;
          border-radius: 15px;
          height: 28px;
          line-height: 28px;
          font-size: 13px;
          color: #666;
        }
      }
    }
  }
}
</style>
